<style>
  .selfCheck {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }

  .left {
    width: 400px;
    flex-shrink: 0;
    text-align: center;
    margin-right: 48px;
    margin-left: 39px;
  }

  .right {
    flex-shrink: 0;
    flex: 1;
    margin-right: 45px;
  }

  /* 雷达 */
  .redar {
    width: 282px;
    height: 282px;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    margin-top: 60px;
  }

  .redar .img {
    width: 282px;
    height: 282px;
    position: absolute;
    left: 0;
    top: 0;
  }

  .img.lv1 {
    z-index: 10;
  }
  .img.lv2 {
    z-index: 9;
  }
  .img.lv3 {
    z-index: 8;
  }

  .rotate {
    animation: fadenum 2s infinite;
    animation-timing-function: linear
  }

  @keyframes fadenum {

    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }

  }

  /* 雷达操作部分 */
  .default-panel {
    color: rgba(0, 0, 0, 0.85);
    margin-top: 37px;
    line-height: 1;
  }

  .default-panel .title {
    font-family: SourceHanSansCN-Medium;
    font-size: 24px;
    font-weight: 500;
  }

  #day-number .number {
    color: #ff3535;
  }

  .default-panel .second-title {
    font-family: SourceHanSansCN-Regular;
    font-size: 20px;
    font-weight: 400;
    margin-top: 20px;
    margin-bottom: 40px;
  }

  #scanner {
    width: 220px;
    height: 51px;
    background: #4B6EEF;
    border-radius: 8px;
    border: none;
    font-family: SourceHanSansCN-Medium;
    font-size: 20px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    line-height: 32px;
    font-weight: 500;
  }

  /* 扫描中 */
  .scanning {
    margin-top: 49px;
    line-height: 1;
  }

  .time-part {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .time-part #time-record,
  .time-part .title {
    flex-shrink: 0;
  }

  .time-part .title {
    font-family: SourceHanSansCN-Regular;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 400;
  }

  .time-part .title::after {
    content: '';
    animation: scanning 1.5s infinite;
  }

  @keyframes scanning {

    0%,
    100% {
      content: '';
    }

    12.5% {

      content: '·';
    }

    25% {
      content: '··';
    }

    37.5% {

      content: '···';
    }

    50% {
      content: '····';
    }

    62.5% {
      content: '·····';
    }

    75% {
      content: '······';
    }
  }

  #time-record {
    font-family: SourceHanSansCN-Normal;
    font-size: 14px;
    color: #111111;
    letter-spacing: 0;
    font-weight: 400;
  }

  #file-path {
    font-family: SourceHanSansCN-Normal;
    font-size: 14px;
    color: #4B6EEF;
    letter-spacing: 0;
    font-weight: 400;
    margin-bottom: 30px;
  }

  #stop-scanner {
    width: 56px;
    height: 32px;
    border-radius: 4px;
    font-family: SourceHanSansCN-Regular;
    font-size: 14px;
    letter-spacing: 0;
    cursor: pointer;
    color: #4B6EEF;
    line-height: 30px;
    font-weight: 400;
    margin: 0 auto;
  }

  /* 表格 */
  .right .title {
    font-family: SourceHanSansCN-Medium;
    font-size: 18px;
    color: #000000;
    letter-spacing: 0;
    font-weight: 500;
    margin-top: 108px;
    margin-bottom: 19px;
    padding-left: 8px;
  }

  .table-part {
    border: none;
  }

  .table-part .layui-table {
    color: #2F343E;
  }

  .table-part .layui-table .layui-table-cell {
    padding-left: 48px;
  }

  .cell-state {
    display: inline-flex;
    align-items: center;
  }

  .right .table-part .cell-icon {
    width: 18px;
    height: 18px;
    margin-right: 4px;
  }

  .selfCheck .layui-table thead tr,
  .selfCheck .layui-table-header {
    background: #F3F5FC;
    font-size: 14px;
    color: #2F343E;
    letter-spacing: 0;
    font-weight: 400;
  }


  .empty {
    height: 239px;
    width: calc(100% - 2px);
    font-family: SourceHanSansCN-Regular;
    font-size: 16px;
    color: #bfbfbf;
    line-height: 22px;
    font-weight: 400;
    text-align: center;
    border: 1px solid #F3F5FC;
    border-top: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .empty-img {
    width: 232px;
    margin-bottom: 22px;
  }
</style>
<script src="res/js/checkDate.js"></script>
<div class="selfCheck">
  <div class="left">
    <div class="redar">
      <img class="scanner img lv1" src="res/img/selfCheck/redarBg0.png" alt="" srcset="">
      <img class="img lv2" id="rotate-img" src="res/img/selfCheck/redarRotate.png" alt="" srcset="">
      <img class="scanner img lv3" src="res/img/selfCheck/redarBg1.png" alt="" srcset="">
    </div>
    <div class="default-panel">
      <div class="title">您在 <span id="day-number"><span class="number">0</span> 天前</span>进行过保密自查</div>
      <div class="second-title">定期自查可以有效预防违规风险</div>
      <button type="button" class="layui-btn layui-btn-normal" id="scanner">开始自查</button>
    </div>
    <div class="scanning">
      <div class="time-file">
        <div class="time-part">
          <span class="title" id="scanning-title">扫描中</span>
          <span id="time-record">00:00:00</span>
        </div>
        <!-- 扫描文件路径 -->
        <div id="file-path" class="layui-elip">扫描准备中</div>
      </div>
      <div id="stop-scanner">停止</div>
    </div>
  </div>
  <div class="right">
    <div class="title">自查记录</div>
    <table class="layui-hide" id="line-table" lay-filter="table"></table>
  </div>
</div>
<script src="res/js/strLen.js"></script>
<script type="text/javascript">
  document.onselectstart = new Function("event.returnValue=false;");
  layui.use(function () {
    let $ = layui.$
    let table = layui.table
    let util = layui.util
    var layer = layui.layer

    let dataArr = null // 表格
    let task_id = sessionStorage.getItem('task_id') // 当前扫描的 ver 版本

    // 读取自查记录
    function getHistory() {
      let data = {
        cmd: 'MainwtScanListReq'
      }
      reqPageData(data)
    }
    getHistory()

    // 确定 显示
    function checkJustFinished(arr) {
      if (arr.length > 0) {
        var date1 = arr[0].start_time;  //开始时间
        var date2 = getDate();    //结束时间
        var date3 = date2 - new Date(date1).getTime();   //时间差的毫秒数    
        //计算出相差天数
        var days = Math.floor(date3 / (24 * 3600 * 1000))
        if (days <= 0) {
          $('#day-number').html("<span class='number'>1</span> 天内")
        } else {
          $('#day-number').html("<span class='number'>" + days + "</span> 天前")
        }
      }
    }

    // 监听返回数据
    window.addEventListener("setItemEvent", function (e) {
      switch (e.key) {
        case 'MainwtScanListRes': // 自查记录
          dataArr = JSON.parse(e.newValue).ScanList || []
          checkJustFinished(dataArr || [])
          tableReloadData()
          break
        case 'task_states': // 实时扫描 回馈
          checkScannerState(e.newValue)
          break
        case 'refresh': // 刷新
          getHistory()
          break
      }
    })

    // 秒数转换
    function getTime(time) {
      let h = parseInt(time / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      let m = parseInt(time / 60 % 60)
      m = m < 10 ? '0' + m : m
      let s = parseInt(time % 60)
      s = s < 10 ? '0' + s : s
      return h + ':' + m + ':' + s
    }
    // 判断计时是否开始 展示相关dom
    if (timeRecord) {
      if ($('#time-record')) {
        $('#time-record').text(getTime(timeRecord))
      }
      $('#rotate-img').addClass('rotate')
      $('.default-panel').addClass('layui-hide')
      $('.scanning').removeClass('layui-hide')
    } else {
      $('.scanning').addClass('layui-hide')
      $('.default-panel').removeClass('layui-hide')
    }
    // 计时
    function setTimeRecord() {
      mineTime = setInterval(() => {
        timeRecord += 1
        if ($('#time-record')) {
          $('#time-record').text(getTime(timeRecord))
        }
      }, 1000)
    }
    // 开始
    $('#scanner').click(function () {
      let sendDate = getDate()
      let data = {
        cmd: 'res_mg_scan',
        body: {
          ret: '0',
          ver: 'local_' + util.toDateString(sendDate, 'yyyyMMddHHmmss'),
          start_time: util.toDateString(sendDate, 'yyyy-MM-dd HH:mm:ss'),
          policy_ver: '',
          scan_state: 1
        }
      }
      reqPageData(data)
    })
    // 开始计时 dom操作
    function startDom() {
      // 扫描文字路径
      $('#file-path').text(sessionStorage.getItem('file_path') || '扫描准备中')
      // 切换显示区域
      $('#rotate-img').addClass('rotate')
      // setTimeRecord() // 本机定时器
      $('.default-panel').addClass('layui-hide')
      $('.scanning').removeClass('layui-hide')
    }


    // 继续扫描状态
    if (task_id) {
      startDom()
    }

    // 停止
    $('#stop-scanner').click(function () {
      let data = {
        cmd: 'res_mg_scan',
        body: {
          ret: '0',
          ver: task_id,
          policy_ver: '',
          scan_state: 2
        }
      }
      sessionStorage.removeItem('task_id')
      reqPageData(data)
    })
    // 终止计时 dom操作
    function endDom() {
      $('#rotate-img').removeClass('rotate')
      timeRecord = 0
      // clearInterval(mineTime)
      $('.scanning').addClass('layui-hide')
      $('.default-panel').removeClass('layui-hide')
    }
    // 处理 扫描返回的实时数据
    function checkScannerState(val) {
      let res = JSON.parse(val) || {}
      let resState = res.scan_state
      // 1, //扫描开始 // 2, //扫描停止 // 3, //扫描中 // 4 //扫描结束
      if (resState * 1 === 1 || resState * 1 === 3) {
        startDom()
        task_id = res.task_id
        sessionStorage.setItem('task_id', task_id)
        if (res.file_path) {
          // 过长字符串...拼接展示
          if (res.file_path.length > 51) { // 限制字长51
            res.file_path_origin = res.file_path
            res.file_path = getCustomStr(res.file_path, 30) + '...' + getCustomStr(res.file_path, -20) // 拼接字符串 一个中文长度记为2
          }
          sessionStorage.setItem('file_path', res.file_path)
        }
      } else if (resState * 1 === 2 || resState * 1 === 4) {
        $('#file-path').text('扫描准备中')
        endDom()
        sessionStorage.removeItem('task_id')
        sessionStorage.removeItem('file_path')
        getHistory()
      }
      let file_path = res.file_path || sessionStorage.getItem('file_path') || '扫描准备中'
      $('#file-path').text(file_path)
      $('#file-path').prop('title',res.file_path_origin)
      timeFn(res.start_time);// 时间差
    }

    // 计算时间差
    function timeFn(d1) {//d1作为一个变量传进来
      var dateBegin = new Date(d1).getTime();
      var dateEnd = getDate();//获取当前时间
      var dateDiff = dateEnd - dateBegin;//时间差的毫秒数
      var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000));//计算出相差天数
      var leave1 = dateDiff % (24 * 3600 * 1000)    //计算天数后剩余的毫秒数
      var hours = Math.floor(leave1 / (3600 * 1000))//计算出小时数
      //计算相差分钟数
      var leave2 = leave1 % (3600 * 1000)    //计算小时数后剩余的毫秒数
      var minutes = Math.floor(leave2 / (60 * 1000))//计算相差分钟数
      //计算相差秒数
      var leave3 = leave2 % (60 * 1000)      //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000)
      // console.log(" 相差 " + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
      hours = hours > 9 ? hours : ('0' + hours)
      minutes = minutes > 9 ? minutes : ('0' + minutes)
      seconds = seconds > 9 ? seconds : ('0' + seconds)
      $('#time-record').text(hours + ':' + minutes + ':' + seconds)
    }

    // 表格渲染
    table.render({
      elem: '#line-table',
      data: dataArr,
      height: '290',
      skin: 'line',
      id: 'line-table',
      className: 'table-part',
      lineStyle: 'height: 48px',
      cols: [[
        { field: 'start_time', title: '检查时间', width: 248 },
        { field: 'ScanResult', title: '结果', templet: '#table-Tpl' }
      ]],
      done: function (res, curr, count) {
        if (!count) {
          $("[lay-id=line-table] .layui-table-main").html('<div class="empty"><div>暂无记录</div></div>')
        }
      }
    });


    // 获取新数据 表格重载
    function tableReloadData() {
      table.reload('line-table', {
        data: dataArr
      })
    }
  })
</script>
<!--表格模板 -->
<script id="table-Tpl" type="text/html">
  <span class="cell-state">
    {{# if (d.scan_state*1 === 4) {}}
    <img class="cell-icon" src="res/img/selfCheck/successIcon.png" alt="" srcset=""> 检查完成
    {{# } else { }}
    <img class="cell-icon" src="res/img/alarm/warningType2.png" alt="" srcset=""> 检查停止
    {{# } }}
  </span>
</script>